<!--
      { label: '单行文本', type: 'text' },
      { label: '多行文本', type: 'textarea' },
      { label: '计数器', type: 'number' },
      { label: '日期选择器', type: 'date' },
      { label: '颜色选择器', type: 'color' },
      { label: '滑块', type: 'slider' },
      { label: '单选框组', type: 'radio' },
      { label: '多选框组', type: 'checkbox' },
      { label: '下拉单选', type: 'select' },
      { label: '下拉多选', type: 'multipleSelect' },
      { label: '级联选择', type: 'cascader' },
      { label: '开关', type: 'switch' },
      { label: '富文本编辑器', type: 'editor' },
      { label: '图片上传', type: 'imageUpload' },
      { label: '视频上传', type: 'videoUpload' },
      { label: '音频上传', type: 'audioUpload' },
      { label: '文件上传', type: 'fileUpload' },
-->
<template>
  <el-input
    v-if="field.type === 'text'"
    v-model="data"
    :placeholder="field.placeholder"
    @blur="emit('inputBlur', data)"
  />
  <el-input
    v-else-if="field.type === 'textarea'"
    v-model="data"
    type="textarea"
    :placeholder="field.placeholder"
    :rows="field.rows"
    @blur="emit('inputBlur', data)"
  />
  <el-input-number
    v-else-if="field.type === 'number'"
    v-model="data"
    :placeholder="field.placeholder"
  />
  <el-date-picker
    v-else-if="field.type === 'date'"
    v-model="data"
    :type="field.dateType ?? 'date'"
    :placeholder="field.placeholder"
  />
  <el-color-picker v-else-if="field.type === 'color'" v-model="data" />
  <el-slider
    v-else-if="field.type === 'slider'"
    v-model="data"
    :show-input="field.showInput ?? false"
    :min="field.min"
    :max="field.max"
  />
  <el-switch v-else-if="field.type === 'switch'" v-model="data" />
  <el-radio-group
    v-else-if="field.type === 'radio'"
    v-model="dataKey"
    @change="(val) => (data = dictList.find((item) => item.value === val)?.label)"
  >
    <template v-if="field.checkStyle === 'button'">
      <el-radio-button v-for="item in dictList" :key="item.id" :label="item.value">{{
        item.label
      }}</el-radio-button>
    </template>
    <template v-else>
      <el-radio v-for="item in dictList" :key="item.id" :label="item.value">{{
        item.label
      }}</el-radio>
    </template>
  </el-radio-group>
  <el-checkbox-group
    v-else-if="field.type === 'checkbox'"
    v-model="dataKey"
    @change="
      (val) =>
        (data = dictList.filter((item) => val.indexOf(item.value) !== -1).map((item) => item.label))
    "
  >
    <template v-if="field.checkStyle === 'button'">
      <el-checkbox-button v-for="item in dictList" :key="item.id" :label="item.value">{{
        item.label
      }}</el-checkbox-button>
    </template>
    <template v-else>
      <el-checkbox v-for="item in dictList" :key="item.id" :label="item.value">{{
        item.label
      }}</el-checkbox>
    </template>
  </el-checkbox-group>
  <el-select
    v-else-if="field.type === 'select'"
    v-model="dataKey"
    :clearable="field.clearable"
    :placeholder="field.placeholder"
    class="w-full"
    @change="(val) => (data = dictList.find((item) => item.value === val)?.label)"
  >
    <el-option v-for="item in dictList" :key="item.id" :value="item.value" :label="item.label" />
  </el-select>
  <el-select
    v-else-if="field.type === 'multipleSelect'"
    v-model="dataKey"
    :clearable="field.clearable"
    :placeholder="field.placeholder"
    multiple
    class="w-full"
    @change="
      (val) =>
        (data = dictList.filter((item) => val.indexOf(item.value) !== -1).map((item) => item.label))
    "
  >
    <el-option v-for="item in dictList" :key="item.id" :value="item.value" :label="item.label" />
  </el-select>
  <image-upload
    v-else-if="field.type === 'imageUpload'"
    v-model="data"
    :height="field.imageHeight"
    :width="field.imageWidth"
    :mode="field.imageMode"
    :file-accept="field.fileAccept"
    :file-max-size="field.fileMaxSize"
  />
  <template v-else-if="field.type === 'videoUpload'">
    <el-input v-model="data" :placeholder="field.placeholder" maxlength="255" />
    <base-upload
      type="video"
      :file-accept="field.fileAccept"
      :file-max-size="field.fileMaxSize != null ? field.fileMaxSize * 1024 * 1024 : undefined"
      :on-success="(res: any) => (data = res.data.url)"
    />
  </template>
  <template v-else-if="field.type === 'audioUpload'">
    <el-input v-model="data" :placeholder="field.placeholder" maxlength="255" />
    <base-upload
      type="audio"
      :file-accept="field.fileAccept"
      :file-max-size="field.fileMaxSize != null ? field.fileMaxSize * 1024 * 1024 : undefined"
      :on-success="(res: any) => (data = res.data.url)"
    />
  </template>
  <template v-else-if="field.type === 'fileUpload'">
    <el-input v-model="data" :placeholder="field.placeholder" maxlength="255" />
    <base-upload
      type="file"
      :file-accept="field.fileAccept"
      :file-max-size="field.fileMaxSize != null ? field.fileMaxSize * 1024 * 1024 : undefined"
      :on-success="(res: any) => (data = res.data.url)"
    />
  </template>
  <template v-else-if="field.type === 'editor'">
    <div class="w-full contentEditor">
      <Editor v-if="field.editorType === 1"  v-model="data" @blur="checkSensitiveWord(data)" />
      <TinymceEditor v-else-if="field.editorType === 2" v-model="data" />
      <UEditor v-else v-model="data" />
    </div>
  </template>

  <div v-else>{{ `Unsupported type: ${field.type}` }}</div>
</template>
<script setup lang="ts">
import { ref, toRefs, watchEffect, computed } from 'vue'
import { getStrDictOptions } from '@/utils/dict'
import { BaseUpload, ImageUpload } from '@/components/cms/upload/index'
import { checkSensitiveWordApi } from '@/api/cms/content'
import { otherSettings } from '@/store/modules/cmsGlobalConfig'

const message = useMessage() // 消息弹窗
const props = defineProps({
  field: { type: Object, required: true },
  modelValue: { type: Object, default: null },
  modelKey: { type: Object, default: null }
})
const emit = defineEmits({
  'update:modelValue': null,
  'update:modelKey': null,
  inputBlur: null
})
//自定义富文本暂时不知道未触发父组件事件，暂时先冗余在组件内检查敏感词
const checkSensitiveWord = async (text: String) => {
  //0:不提示直接替换; 1:提示之后替换; 2:不允许提交;3 关闭敏感词)
  if (
    otherSettings.sensitiveWordProcessModel == 0 ||
    otherSettings.sensitiveWordProcessModel == 3
  ) {
    return
  }
  if (text.trim()) {
    const sensitiveWords = await checkSensitiveWordApi({ text: text.trim() })
    if (sensitiveWords.length > 0) {
      message.error(`存在敏感词${sensitiveWords}!`)
    }
  }
}
const { field, modelValue, modelKey } = toRefs(props)

const dictList = ref<any[]>([])
watchEffect(async () => {
  const type = field.value.dictType
  if (type) {
    dictList.value = await getStrDictOptions(type)
  }
})
const data = computed<any>({
  get: () => {
    // 下拉多选框的 v-model 为空会报错。
    if (modelValue.value == null && ['multipleSelect', 'checkbox'].includes(field.value.type)) {
      return []
    }
    return modelValue.value
  },
  set: (val) => {
    emit('update:modelValue', val)
  }
})
const dataKey = computed<any>({
  get: () => {
    // 下拉多选框的 v-model 为空会报错。
    if (modelKey.value == null && ['multipleSelect', 'checkbox'].includes(field.value.type)) {
      return []
    }
    return modelKey.value
  },
  set: (val) => {
    emit('update:modelKey', val)
  }
})
</script>
<style lang="scss" scoped>
//避免大图或者视频拉伸编辑器
.contentEditor {
  max-width: 100%;
}
</style>